<template>
	<view class="login-container">
		<image src="/static/img/login_bg.png" class="background-img" :style="{height:(cusHeight+322)+'px'}"></image>
		<view class="absolve-wrapper">
			<view class="logo">
				<image src="/static/img/logo.png" class="logo-img"></image>
			</view>
			<view class="text-title">欢迎使用景区智慧大脑平台</view>
			<view class="login-main">
				<view class="input-wrapper">
					<!-- 	<i class="iconfont icon-shouji icon"></i> -->
					<input placeholder-style="font-size:14px;color:#C9C9C9;" placeholder="请输入账号"
						v-model="userInfo.username" maxlength="11" />
				</view>
				<view class="input-wrapper">
					<!-- <i class="iconfont icon-mima icon"></i> -->
					<input placeholder-style="font-size:14px;color:#C9C9C9;" v-if="isText" type="text"
						placeholder="请输入密码" v-model="userInfo.password" />
					<input placeholder-style="font-size:14px;color:#C9C9C9;" v-else type="password" placeholder="请输入密码"
						v-model="userInfo.password" />
					<!-- <i class="iconfont eye" :class="isText ? 'icon-open-eyes' : 'icon-closeeye'"
						@click="isText = !isText"></i> -->
					<!-- <view class="loginCode">获取验证码</view> -->
				</view>
				<button class="cu-btn round login-button lg cu-load" :class="{ loading: loading }"
					@click="getLogin">登录</button>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		getCache,
		setCache,
		apiUrl,
		yfAPIS
	} from "@/utils/cache.js";
	import { login } from "@/api/modules/user.js";
	
	export default {
		data() {
			return {
				loading: false,
				isText: false,
				userInfo: {
					username: '',
					password: ''
				}
			};
		},
		computed: {
			cusHeight() {
				return this.CustomBar;
			}
		},
		methods: {
			async getLogin() {
				
				let that = this;
				if(yfAPIS.ip !=''){
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
				console.log('1651',this.userInfo.password);
				return;
				if(this.userInfo.username ==='' || this.userInfo.password === ''){
					uni.showToast({
						title: '请输入账号密码',
						duration: 1000,
						icon:'none'
					})
					return;
				}
				uni.request({
					url:  'http:'+getCache('yf-APIS').ip+'/smartApp/login',
					data: {
						username:that.userInfo.username,
						password:that.userInfo.password
					},
					header: {
						'Accept': 'application/json',
						'Content-Type': 'application/json',
					},
					method: "POST",
					success: (response) => {
						console.log('adfas',response)
						if(response.data.status === 210){
							setCache('yf-TOKEN', response.data.data.token)
							uni.showToast({
								title: '登录成功',
								duration: 1000,
								icon:'none'
							})
							setTimeout(() => {
									uni.switchTab({
										url: '/pages/index/index'
									})
							},1000)
						}else{
							uni.showToast({
								title: response.data.message,
								duration: 1000,
								icon:'none'
							})
						}
						
						
			
					},
					fail: (error) => {
						uni.showToast({
							title: '登录失败',
							duration: 1000
						})
					},
				});
				
				
				// console.log('asdfasdf',data);
				// const userInfo = this.userInfo;
				// that.loading = true;
				// setTimeout(() => {

				// 	that.loading = false;
				// 	setCache('lw-TOKEN', '12345678789')
					
				// 	uni.switchTab({
				// 		url: '/pages/index/index'
				// 	})
				// }, 1500)
				// console.log('sdfs')

			},

		}
	};
</script>

<style lang="scss" scoped>
	.login-container {
		width: 100%;
		height: 100vh;
		position: relative;
		overflow: hidden;

		// background: url(../../static/loginBg.png) no-repeat;
		// background-size: contain;
		.absolve-wrapper {
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		.background-img {
			width: 100%;
			height: 321px;
		}

		.logo {
			text-align: center;
			margin-top: 142px;
			//margin-top: 110px;
			.logo-img {
				width: 74px;
				height: 84px;
			}
		}

		.text-title {
			font-size: 48rpx;
			margin-top: 18px;
			text-align: center;
			color: #fffefe;
		}

		.login-main {
			box-sizing: border-box;


			margin-top: 36px;
			// left: 10%;
			// right: 10%;
			background-color: #fff;
			width: 100%;
			padding: 70px 40px;
			border-top-right-radius: 30px;

			border-top-left-radius: 30px;

			.input-wrapper {
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;
				padding: 12px 0;
				padding-left: 18px;
				border-radius: 30px;
				border-bottom: 1px solid rgb(242, 242, 242);
				position: relative;
				background-color: #F9F8FA;
				font-size: 14px;

				.loginCode {
					position: absolute;
					right: 12px;
					color: #0065D8;
					font-family: Source Han Sans CN-Normal, Source Han Sans CN;
					font-weight: 400;
				}

				.icon {
					margin-right: 10px;
					font-size: 16px;
				}

				.eye {
					float: right;
					position: absolute;
					right: 5px;
					font-size: 16px;
				}
			}

			.login-button {
				width: 100%;
				color: #fff;
				background-color: #0065D8;
				//background-image: linear-gradient(to right, #ffa6b6, #ff7c93);
				letter-spacing: 2px;
				height: 45px;
				margin-top: 39px;
				border-radius: 30px;
			}
		}

		/deep/ {
			.input-placeholder {
				color: rgb(194, 194, 194);
				font-size: 30rpx;
			}
		}
	}
</style>